<!--组件-参数-->
<template>
  <div>
    <div class="bg" v-if="isShow">

      <div class="row acenter">
        <text class="font28 text2">{{T('网格分布')}}</text>
        <div class="width8"></div>
        <LImage class="explain" :src="Config.img('wenhao.png')" @click="explainClick"></LImage>
      </div>

      <div class="buts">
        <div :class="['but', tag == index ? 'main1' : 'bg2']" v-for="(item, index) in buts" v-bind:key="index" @click="butClick(index)">
          <text :class="['font28' , tag == index ? 'text1' : 'text2']">{{T(item)}}</text>
        </div>
      </div>
      
      <LInput class="input" v-if="param" v-model="param.value" 
              :title="T(param.name)" 
              :comment="T(param.comment)" 
              :limits="getRange(param)" 
              :tips="(param.optional ? T('选填') : T(param.name))" 
              :unit="T(param.unitName)" @input="onInput"></LInput>
    </div>
  </div>
</template>

<script>

//组件
import LInput from "@/public/view/LInput.vue";

//功能
import math from "@/_js/math";
import modal from "@/_js/modal";
import Config from "@/_js/config";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {

  components: {
    LInput,
  },

  model:{
    prop:"values",
    event:"change",
  },

  props:{
    values:undefined,
    isShow:false,
  },

  watch: {
    values: {
      deep: false,
      handler (val, oldVal) {
        this.initData();
      }
    }
  },


  data() {
    return {   
      T:T,   
      math:math,
      Config:Config,

      buts:['等比网格', '等差网格'],
      tag:0,

      valuesx:undefined,
      param:undefined,
    };
  },

  mounted(){
    this.initData();
  },

  methods:{
    
    //初始化数据
    initData() {
      this.valuesx = JSON.parse(JSON.stringify(this.values));

      for (let index = 0; index < this.values.length; index++) {
        var value = this.values[index];
        if (math.getNumber(value.value) > 0) {
          this.tag = index;
          break;
        }
      }
      
      for (let index = 0; index < this.values.length; index++) {
        var value = this.values[index];
        if (index != this.tag) {
          value.value = '0';
        }
      }
      this.param = this.values[this.tag];
    },

    //检查
    checkError(){
      
      if (this.param.value.length == 0) {
        modal.toast(T('请输入')+this.param.name);
        return true;
      } 
        
      else if (this.param.start == null || 
                this.param.start.length == 0 || 
                this.param.end == null || 
                this.param.end.length == 0) {
        return false;
      } 
        
      else if (
        this.param.value.length && 
        (math.getNumber(this.param.value) < math.getNumber(this.param.start) ||
            math.getNumber(this.param.value) > math.getNumber(this.param.end))) {
        modal.toast(this.param.name+T('不在范围内'));
        return true;
      }
      
      return false;
    },

    /********************************** Get方法*/
    //获取范围
    getRange(item){

      if (item.start == null || item.start.length == 0 || item.end == null || item.end.length == 0) {
        return null;
      }
      return T('范围')+item.start+'~'+item.end;
    },

    /**********************************************输入框回调*/
    //输入内容改变
    onInput(e){
      this.$emit("paramChange");
    },

    /********************************************** 点击触发*/
    //说明点击
    explainClick() {
      var parm = {'message':T('等比网格，每格开仓间距按固定百分比排列；等差网格，每格开仓间距按固定价差排列。')};
      modal.alert(parm,(bool)=>{
        navigator.back();
      });
    },

    //按钮点击
    butClick(index) {

      if (this.tag == index) {
        return;
      }
      this.tag = index;


      for (let index = 0; index < this.valuesx.length; index++) {
        var valuex = this.valuesx[index];
        var value = this.values[index];
        if (index != this.tag) {
          value.value = '0';
        } else {
          value.value = valuex.value;
        }
      }
      this.param = this.values[this.tag];
    },

    //遮挡层，点击遮挡
    click(){

    },
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.bg{
  width: 670px;
}

.buts {
  flex-direction: row;
  justify-content: space-between;
  width: 670px;

  margin-top: 40px;
}
.but {
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 76px;
  border-radius: 16px;
}

.mantle{
  width: 670px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.arrow{
  width: 20px;
  height: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.recommend {
  flex-direction: row;
  align-items: center;
  height: 48px;
  border-radius: 27px;
  padding-left: 20px;
  padding-right: 20px;
}
.explain{
  width: 28px;
  height: 28px;
  margin-left: 8px;
  margin-right: 8px;
}
.input {
  margin-top: 40px;
}


/*************** 宽高*/
.width8{
  width: 8px;
}
.height40{
  height: 40px;
}
</style>
